Usage
director.config({
delay: 10,
flush_after: 30,
actors_appear_once: true,
actors_disappear_once: true
})
director.assign($acotrs,onAppear,onWinScrolling,onDisappear[,options])
/*options:{
appear_once: true
}*/
director.direct(); // just call .direct() only once, you can assign other $actors later.
Example
director.assign( $('selectors'), /*elements*/
function($actor){
// do something when [first] appear....
}, /* [callback], fired when this element first appear on browser's viewport */
function($actor,data/* {winScrollTop,winHeight,actorOffsetTop,actorHeight} */){
// do something when $acto is within browser's viewport and window is scrolling
}, /* [callback], fired when this element is within win viewport and win is scrolling */
function($actor){
// do something when [first] disappear
}/*[callback], fired when this element [first] disappear from browser's viewport */
); // chainable
director.direct();
on appear
director.assign($('.bi'),function($self){
$self.addClass('bounceIn');
});
Parallax scrolling
director.assign($('.parallax'),null, function($self, data) {
var speed = 6;
var offsetY = data.actorOffsetTop > 0 ? data.winHeight - data.actorOffsetTop : 0,
ypos = -((data.winScrollTop + offsetY) / speed),
coords = '50% ' + ypos + 'px';
var styles = {};
styles.backgroundPosition = coords;
$self.css(styles);
});